import "./tabar.scss"
import { useNavigate } from "react-router";
const Tabbar = () => {

    // 获取导航对象
    let navigate = useNavigate();
    const list = [
        {
            name: "主页",
            route: "/home"
        },
        {
            name: "关于我们",
            route: "/about"
        },
        {
            name: "添加用户",
            route: "/add"
        },
        {
            name: "测试",
            route: "/test"
        },

    ]

    const changeItem = (val) => {
        const route = list.find(re=>{
            return re.name==val;
        })
        navigate(route.route)
    }
    return (
        <div className="headerStyle">
            <div>管理系统</div>
            <div className="itemStyle" >
                {
                    list?.map(re => {
                        return (
                            <div key={re.name} onClick={() => changeItem(re.name)}>{re.name}</div>
                        )
                    })
                }
            </div>
        </div>
    )
}
export default Tabbar